<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<head>
	<title><spring:message code="titulo.solicitarCambioCredenciales" text="ConstruSoft Suite - Solicitar cambio de credenciales" /></title>
	
	<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
	
	<core:set var="lang" value="${param.lang}" scope="request" />
	<core:if test="${empty lang}">
		<core:set var="lang" value="es" />
	</core:if>
</head>
<body>
	<div class="contenedor mediano">
		<form:form commandName="modeloCredenciales" action="credenciales.do" method="post" acceptCharset="UTF-8" autocomplete="off">
			<form:hidden path="accion" />
			<form:hidden path="paso" />
			<form:hidden path="token" />
			
			<h2><spring:message code="etiqueta.cambiarCredenciales" text="Ingresa tus nuevas credenciales." /></h2>
			
			<h5><spring:message code="hint.reglasPassword" text="Por favor, tenga presente que su contraseña debe cumplir las siguientes condiciones:" /></h5>
			<ul>
				<li><spring:message code="regla.largo" text="Tener entre 8 y 20 caracteres." /></li>
				<li><spring:message code="regla.numero" text="Tener por lo menos un número (0-9)." /></li>
				<li><spring:message code="regla.minuscula" text="Tener por lo menos una letra minúscula (a-z)." /></li>
				<li><spring:message code="regla.mayuscula" text="Tener por lo menos una letra mayúscula (A-Z)." /></li>
				<li><spring:message code="regla.caracter" text="Tener por lo menos un caracter especial (`~!@#$%^&()-_=[{]}|&quot;;:',<.>/?)." /></li>
			</ul>
			
			<form:errors cssClass="mensaje-error-campo" />
    		    		
      		<div class="campo horizontal">
      			<form:label path="nueva"><spring:message code="etiqueta.nuevaPassword" text="Nueva contraseña" /></form:label>
				
				<spring:message code="etiqueta.nuevaPassword" text="Nueva contraseña" var="placeholder" />
				<spring:message code="hint.nuevaPassword" text="Por favor, ingrese la que será su nueva contraseña." var="title" />
				<form:password path="nueva" maxlength="20" tabindex="1" placeholder="${placeholder}" title="${title}" autofocus="autofocus" cssErrorClass="campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="nueva" />
				
				<div class="progreso">
					<div class="barra"></div>
				</div>
				<div class="estado">
					<spring:message code="etiqueta.complejidad" text="Complejidad" />
					<span class="complejidad">0%</span>
				</div>
      		</div>
      		<div class="campo horizontal">
      			<form:label path="confirmar"><spring:message code="etiqueta.confirmarPassword" text="Confirmar contraseña" /></form:label>
				
				<spring:message code="etiqueta.confirmarPassword" text="Confirmar contraseña" var="placeholder" />
				<spring:message code="hint.confirmarPassword" text="Por favor, vuelva a ingresar la que será su nueva contraseña." var="title" />
				<form:password path="confirmar" maxlength="20" tabindex="2" placeholder="${placeholder}" title="${title}" cssErrorClass="campo-error" />
				<form:errors cssClass="mensaje-error-campo" path="confirmar" />
      		</div>
      		<div class="recaptcha">
      			<div id="recaptcha">
      				&nbsp;
      			</div>
      			<form:errors cssClass="mensaje-error-campo" path="recaptcha_response_field"/>
      		</div>
      		
      		<button type="submit" tabindex="2"><spring:message code="etiqueta.solicitar" text="Solicitar" /></button>
			<button type="button" tabindex="3" onclick="javascript:cancelar();"><spring:message code="etiqueta.cancelar" text="Cancelar" /></button>
		</form:form>
	</div>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
	
		jQuery(document).ready(function(){	
   			Recaptcha.create("${clavePublicaCaptcha}", "recaptcha", { theme: "clean", lang: "${lang}" } );

   			jQuery('#nueva').complexify({}, function (valid, complexity) {
	            if (!valid) {
	                $('.barra').css({'width':complexity + '%'}).removeClass('valida').addClass('invalida');
	            } else {
	                $('.barra').css({'width':complexity + '%'}).removeClass('invalida').addClass('valida');
	            }
	            $('.complejidad').html(Math.round(complexity) + '%');
	        });

   			jQuery("form").validity(function() {
    			//Requerido. Entre 8 y 20 caracteres (inclusive)
    			jQuery("#nueva")
    				.require('<spring:message code="mensaje.passwordRequerida" text="Por favor, ingrese la contraseña." />')
    				.minLength(8)
    				.maxLength(20);

    			//Requerido. Entre 8 y 20 caracteres (inclusive)
    			jQuery("#confirmar")
    				.require('<spring:message code="mensaje.passwordNoConfirmada" text="Debe confirmar la contraseña." />')
    				.minLength(8)
    				.maxLength(20);

    			jQuery("input[type='password']")
            		.equal('<spring:message code="mensaje.passwordDiferentes" text="Los textos ingresados no coinciden." />');

    			jQuery("#recaptcha_response_field")
					.require();
   			});
   		});
   		
    </script>
</body>